<template>
  <i class="bc-icon" :class="['icon-'+name,{
    'icon-loading':~name.indexOf('load'),
    'is-disabled':disabled
  }]" :style="{
    'display':'inline-block',
    'fontSize':iconSize,
    'color':color
  }"></i>
</template>

<script>
export default {
  name: "BcIcon",
  props: {
    disabled: Boolean,
    color: String,
    name: {
      type: String,
      default: 'bc-circle'
    },
    size: {
      type: [Number, String],
      default: "1rem"
    }
  },
  computed: {
    iconSize() {
      if (typeof this.size === "number") return this.size + "px";
      else return this.size;
    }
  }
};
</script>

<style scoped>
.bc-icon.icon-loading {
  animation: rotating 1.5s linear infinite;
}
.bc-icon.is-disabled {
  cursor: not-allowed;
  fill: #bbb;
}
@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>